<template>
  <div class="app-container">
    <!--<div class="filter-container">-->
    <!--<el-button-->
    <!--class="filter-item"-->
    <!--style="margin-left: 10px;"-->
    <!--type="primary"-->
    <!--icon="el-icon-edit"-->
    <!--@click="handleCreate"-->
    <!--&gt;-->
    <!--新增银行卡-->
    <!--</el-button>-->
    <!--</div>-->

    <div class="filter-container"        v-if="restPas">
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        新增子账号
      </el-button>
    </div>

    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>基本信息</span>
     <!--   <el-button
          v-if="restPas"
          style="float: right;"
          type="danger"
          icon="el-icon-setting"
          @click="setPassword"
        >重置密码
        </el-button>-->
      </div>
      <div>
        <el-row>
          <el-col :span="8">
            <div class="grid-content ">
              负责人：{{ name }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              联系电话 ：{{ phone }}
            </div>
          </el-col>
          <!--<el-col :span="8">-->
            <!--<div class="grid-content ">-->
              <!--钱包余额：{{ currentMoney }}-->
            <!--</div>-->
          <!--</el-col>-->
        </el-row>
      </div>
    </el-card>

    <el-card
      class="box-card"
      style="margin-top:20px"
    >
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <!--<el-tab-pane-->
        <!--label="银行卡信息"-->
        <!--name="first"-->
        <!--&gt;-->
        <!--<div-->
        <!--slot="header"-->
        <!--class="clearfix"-->
        <!--&gt;-->
        <!--&lt;!&ndash;<span>银行卡信息</span>&ndash;&gt;-->
        <!--<el-button-->
        <!--style="float: right;"-->
        <!--type="primary"-->
        <!--icon="el-icon-edit"-->
        <!--@click="handleCreate"-->
        <!--&gt;新增银行卡-->
        <!--</el-button>-->
        <!--</div>-->
        <!--<div>-->
        <!--<el-table-->
        <!--:key="key"-->
        <!--:data="tableData"-->
        <!--border-->
        <!--fit-->
        <!--highlight-current-row-->
        <!--style="width: 100%;"-->
        <!--&gt;-->
        <!--<el-table-column-->
        <!--label="序号"-->
        <!--prop="id"-->
        <!--align="center"-->
        <!--width="50"-->
        <!--&gt;-->
        <!--<template slot-scope="scope">-->
        <!--{{ scope.$index + 1 }}-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column-->
        <!--prop="openName"-->
        <!--label="银行卡姓名"-->
        <!--align="center"-->
        <!--width=""-->
        <!--/>-->
        <!--<el-->
        <!--<el-table-column-->
        <!--prop="cardNum"-->
        <!--label="银行卡帐号"-->
        <!--align="center"-->
        <!--width=""-->
        <!--/>-->

        <!--<el-table-column-->
        <!--prop="idCardNum"-->
        <!--label="银行卡身份证"-->
        <!--align="center"-->
        <!--width=""-->
        <!--/>-->
        <!--<el-table-column-->
        <!--prop="created"-->
        <!--label="创建时间"-->
        <!--align="center"-->
        <!--width=""-->
        <!--/>-->
        <!--&lt;!&ndash; <el-table-column-->
        <!--label="创建时间"-->
        <!--width=""-->
        <!--align="center"-->
        <!--&gt;-->
        <!--<template slot-scope="scope">-->
        <!--{{ scope.row.created | parseTime('{y}-{m}-{d} {h}:{i}') }}-->
        <!--</template>-->
        <!--</el-table-column>] &ndash;&gt;-->

        <!--<el-->
        <!--<el-table-column-->
        <!--prop="openBank"-->
        <!--label="所属银行"-->
        <!--align="center"-->
        <!--width=""-->
        <!--/>-->

        <!--<el-table-column-->
        <!--label="操作"-->
        <!--align="center"-->
        <!--width=""-->
        <!--fixed="right"-->
        <!--&gt;-->
        <!--<template slot-scope="scope">-->
        <!--<el-button-->
        <!--type="danger"-->
        <!--size="mini"-->
        <!--@click="delBankCard(scope.row)"-->
        <!--&gt;删除-->
        <!--</el-button>-->

        <!--<el-button-->
        <!--type="primary"-->
        <!--size="mini"-->
        <!--@click="handleGetMoney(scope.row)"-->
        <!--&gt;提现-->
        <!--</el-button>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--</el-table>-->

        <!--</div>-->
        <!--</el-tab-pane>-->

        <!-- <el-tab-pane
          label="钱包变动记录"
          name="first"
        >
          <div>
            <el-table
              :key="key"
              :data="walletDate"
              border
              fit
              highlight-current-row
              style="width: 100%;"
            >
              <el-table-column
                label="序号"
                prop="id"
                align="center"
                width="50"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="payName"
                label="支方名称"
                align="center"
                width=""
              />
              <el-table-column
                prop="payPhone"
                label="支方电话"
                align="center"
                width=""
              />
              <el-table-column
                prop="receiveName"
                label="收方名称"
                align="center"
                width=""
              />
              <el-table-column
                prop="receivePhone"
                label="收方电话"
                align="center"
                width=""
              />
              <el-table-column
                prop="created"
                label="时间"
                align="center"
                width=""
              />
              <el-table-column
                prop="moeny"
                label="金额"
                align="center"
                width=""
              >
                <template slot-scope="scope">
                  {{ scope.row.type | walletTradeFilter }}{{scope.row.moeny}}
                </template>
              </el-table-column>

              <el-table-column
                prop="remark"
                label="描述"
                align="center"
                width="200"
              />
            </el-table>
          </div>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getWalletTradeList"
          />

        </el-tab-pane> -->


        <el-tab-pane
          v-if="restPas"
          label="子账号信息"
          name="first"
        >
          <div>
            <el-table
              :key="key"
              :data="tableData"
              border
              fit
              highlight-current-row
              style="width: 100%;"
            >
              <el-table-column
                label="序号"
                prop="id"
                align="center"
                width="50"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
                align="center"
                width=""
              />
              <el-table-column
                prop="phone"
                label="账号"
                align="center"
                width=""
              />
              <el-table-column
                prop="created"
                label="创建时间"
                align="center"
                width=""
              />
              <el-table-column
                label="操作"
                align="center"
                width="260px"
                class-name="small-padding fixed-width"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    size="mini"
                    style="width: 75px;"
                    @click="setPasswordUser(scope.row)"
                  >重置密码
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    /> -->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      top="2vh"
      width="550px"
    >
      <el-form
        ref="temp"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item
          label="姓名"
          prop="name"
        >
          <el-input v-model="temp.name"/>
        </el-form-item>
        <el-form-item
          label="账号"
          prop="phone"
        >
          <el-input v-model="temp.phone"/>
        </el-form-item>

        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input v-model="temp.password"/>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="dialogStatus==='create'?createData():updateData()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="提现"
      :visible.sync="dialogFormMoney"
      top="2vh"
      width="600px"
    >
      <el-form
        ref="temp1"
        :rules="rules"
        :model="temp1"
        label-position="left"
        label-width="120px"
        style="width: 550px; margin-left:50px;"
        class="demo-dynamic"
        :inline="true"
      >
        <el-form-item
          label="开户人姓名"
          prop=""
        >
          <el-input
            v-model="temp1.openName"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item
          label="身份证号码"
          prop=""
        >
          <el-input
            v-model="temp1.idCardNum"
            :disabled="true"
          />
        </el-form-item>

        <el-form-item
          label="银行卡号码"
          prop=""
        >
          <el-input
            v-model="temp1.cardNum"
            :disabled="true"
          />
        </el-form-item>

        <el-form-item
          label="可提现金额"
          prop=""
        >
          <el-input
            v-model="currentMoney"
            :disabled="true"
          />
        </el-form-item>

        <el-form-item
          label="提现金额"
          prop="money"
        >
          <el-input
            v-model="temp1.money"
            clearable
            style="width:170px"
          />
        </el-form-item>

        <el-form-item
          label="提现密码"
          prop="payPassword"
        >
          <el-input
            v-model="temp1.payPassword"
            clearable
            show-password
            style="width:170px"
          />
        </el-form-item>

        <el-form-item
          label="验证码"
          prop="code"
        >
          <el-input
            v-model="temp1.code"
            clearable
            style="width:170px"
          />
          <el-button
            type="primary"
            size="mini"
            @click="getCode()"
          >获取验证码
          </el-button>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormMoney = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="getMoney()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import {
    addBankCard,
    bankCardList,
    getPhoneCode,
    agentGetMoney,
    unBindBankCard,
    walletTradeList,
    registerSub,
    getAgentSub
  } from '@/api/v1'
  import {resetPassword, resetPasswordUser} from '@/api/user'
  import { forList } from '@/api/get-list'
  import waves from '@/directive/waves' // Waves directive
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import {parseTime} from '@/utils'
  import {MessageBox, Message} from 'element-ui'

  export default {
    directives: {waves},
    components: {Pagination},
    filters: {
      walletTradeFilter(status) {
        switch (status) {
          case 1:
            return '+'
          case 2:
            return '-'
          case 3:
            return '+'
          case 4:
            return '*'
          case 5:
            return '-'
          case 6:
            return '+'
        }
      }
    },
    data() {
      return {
        restPas: false,
        tableData: [],
        walletDate: [],
        tableKey: 0,
        list: null,
        activeName: 'first',
        total: 0,
        listLoading: true,
        cooperation: [],
        listQuery: {
          page: 1,
          limit: 20,
          sort: '+id',
          relationId: '',
          relationType: ''
        },
        key: 1, // table key
        walletkey: 1, // table key
        dialogFormVisible: false,
        dialogFormMoney: false,
        rules: {
          name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          phone: [{required: true, message: '请输入账号', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}],
          openName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          cardNum: [{required: true, message: '请输入卡号', trigger: 'blur'}],
          idCardNum: [
            {required: true, message: '请输入身份证号码', trigger: 'blur'}
          ],
          // currentMoney: [{ required: true, message: "请输入提现金额", trigger: "blur" }],
          money: [{required: true, message: '请输入提现金额', trigger: 'blur'}],
          payPassword: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
          code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
        },
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '新增'
        },
//        temp: {
//          cardNum: '',
//          openName: '',
//          idCardNum: '',
//          relationId: '', // 省代或油卡商户id–超管添加必传
//          relationType: '' // 类型1为省代，2为油卡商户–超管添加必传
//        },
        temp: {
          name: '',
          phone: '',
          password: '',
          agentId: '', // 省代或油卡商户id–超管添加必传
        },
        temp1: {
          cardNum: '',
          openName: '',
          idCardNum: '',
          relationId: '', // 省代或油卡商户id–超管添加必传
          relationType: '', // 类型1为省代，2为油卡商户–超管添加必传
          money: ''
        }
      }
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        )
        this.key = this.key + 1 // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
        this.walletkey = this.walletkey + 1 // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },

    created() {
      const type = this.$route.query.type // 1是省代  2是商户   是商户重置密码按钮隐藏
      if (type == 1) {
        this.restPas = true
      } else {
        this.restPas = false
      }

      const id = this.$route.query.relationId
      const relationType = this.$route.query.relationType
//      this.temp.relationId = id
//      this.temp.relationType = relationType
      this.temp.agentId = id;
      this.listQuery.relationId = id
      this.listQuery.relationType = relationType

      this.currentMoney = this.$route.query.currentMoney
      this.phone = this.$route.query.phone
      this.name = this.$route.query.name

      console.log(id)
      this.getList()
/*      this.getWalletTradeList()*/
    },
    methods: {
      delBankCard(row) {
        this.$confirm('此操作将删除该银行卡, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            unBindBankCard(row).then(res => {
              Message({
                message: res.msg || 'success',
                type: 'success',
                duration: 2 * 1000
              })
              this.getList()
            })
          })
          .catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // });
          })
      },
      setPassword() {
        const id = this.$route.query.relationId
        const data = {
          agentId: id
        }
        this.$confirm('此操作将重置该用户登录密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            resetPassword(data).then(res => {
              Message({
                message: res.msg || 'success',
                type: 'success',
                duration: 2 * 1000
              })
            })
          })
      },

      setPasswordUser(row) {
        this.$confirm('此操作将重置该用户登录密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            resetPasswordUser({'id': row.id}).then(res => {
              Message({
                message: res.msg || 'success',
                type: 'success',
                duration: 2 * 1000
              })
            })
          })
      },
//      resetTemp() {
//        this.temp.cardNum = ''
//        this.temp.openName = ''
//        this.temp.idCardNum = ''
//      },
      resetTemp() {
        this.temp.name = ''
        this.temp.phone = ''
        this.temp.password = ''
      },
      handleCreate() {
        this.resetTemp()
        console.log(this.temp)
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['temp'].clearValidate()
        })
      },
      getCode() {
        var query = {phone: this.phone}
        getPhoneCode(query).then(res => {
          Message({
            message: res.msg || 'success',
            type: 'success',
            duration: 2 * 1000
          })
        })
      },
      getMoney(row) {
        console.log(this.temp1)
        this.temp1.bankCardId = this.temp1.id
        this.$refs['temp1'].validate(valid => {
          if (valid) {
            agentGetMoney(this.temp1).then(res => {
              this.dialogFormMoney = false
              Message({
                message: res.msg || 'success',
                type: 'success',
                duration: 2 * 1000
              })
            })
          }
        })
      },
      handleGetMoney(row) {
        this.temp1 = Object.assign({}, row) // copy obj
        console.log(row)
        console.log(this.temp1)
        this.dialogFormMoney = true
        this.$nextTick(() => {
          this.$refs['temp1'].clearValidate()
        })
      },

      handleDownload() {
        down(this.listQuery).then(res => {
          console.log(res)
          this.$router.push({
            path: '/down'
          })
        })
      },
      getList() {
        this.listLoading = true
        getAgentSub({'agentId': this.temp.agentId}).then(res => {
          console.log(res)
          this.tableData = res.data;
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
      getWalletTradeList() {
        walletTradeList(this.listQuery).then(res => {
          this.walletDate = res.data.data.records
          this.total = Number(res.data.data.total)
          //          setTimeout(() => {
          //            this.listLoading = false
          //          }, 1.5 * 1000)
          //          console.log(res)
        })
      },
      createData() {
        this.$refs['temp'].validate(valid => {
          if (valid) {
            registerSub(this.temp).then(res => {
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success',
                duration: 2000
              })
              this.getList()
            })
          }
        })
      },
      handleClick(tab, event) {
        console.log(tab, event)
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      }
    }
  }
</script>

